<template>
	<div class="distributionSystem">
		<el-carousel :autoplay="false" indicator-position="none">
			<el-carousel-item v-for="item in carouselList" :key="item">
				<div class="card-container">
					<Card :class="['card-container-item']" v-for="(card, index) in item" :key="index">
						<div slot="header" class="card-container-item-header">
							<div>{{ card.label }}</div>
							<div :class="['status-light', card.status == 0 ? 'status_off' : 'status_on']"></div>
						</div>
						<div slot="content" class="card-container-item-content">
							<div class="card-container-item-content-top">
								<img src="@/assets/newEnergyShip/扇叶.png" alt="" />
								<div>
									<div :class="['mb24', card.status == 0 ? 'txt1_off' : 'txt1_on']">
										{{ card.status == 0 ? '停机' : '运行' }}
									</div>
									<div class="txt2 mb8">舵角</div>
									<div class="txt3 mb8">-2.6</div>
									<div class="txt2">degree</div>
								</div>
							</div>
							<div class="card-container-item-content-middle">{{ '电机' + (index + 1) }}</div>
							<div class="card-container-item-content-bottom">
								<div class="parameters">
									<div class="txt2">额定功率</div>
									<div class="txt3">0.0</div>
									<div class="txt2">kw</div>
								</div>
								<div class="divider"></div>
								<div class="parameters">
									<div class="txt2">转速</div>
									<div class="txt3">0.0</div>
									<div class="txt2">rpm</div>
								</div>
								<div class="divider"></div>
								<div class="parameters">
									<div class="txt2">瞬时功率</div>
									<div class="txt3">0.0</div>
									<div class="txt2">kw</div>
								</div>
							</div>
						</div>
					</Card>
				</div>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>
<script>
import Card from './Card.vue';

export default {
	name: 'propulsionSystem',
	components: { Card },
	data() {
		return {
			carouselList: [
				[
					{ label: '左推进器1', status: 1 },
					{ label: '右推进器1', status: 0 }
				],
				[
					{ label: '左推进器2', status: 1 },
					{ label: '右推进器2', status: 0 }
				]
			]
		};
	}
};
</script>
<style lang="scss" scoped>
.distributionSystem {
	width: 100%;
	height: 100%;
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	.el-carousel {
		width: 100%;
		height: 100%;
		.card-container {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			gap: 41px;
			&-item {
				width: 269px;
				height: 336px;
				&-header {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 5px;
					.status-light {
						width: 9px;
						height: 9px;
						border-radius: 50%;
					}
				}
				&-content {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					&-top {
						display: flex;
						align-items: center;
						img {
							width: calc(150px * 0.95);
							height: calc(145px * 0.95);
						}
						> div {
							flex: 1;
							text-align: center;
						}
					}
					&-middle {
						margin: 8px 0;
					}
					&-bottom {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						.parameters {
							flex: 1;
							text-align: center;
							:nth-child(2) {
								margin: 8px 0;
							}
						}
						.divider {
							width: 1px;
							height: calc(100% - 16px);
							background: rgba(210, 210, 210, 0.38);
						}
					}
				}
			}
		}
	}
	.txt1_on {
		font-weight: bold;
		font-size: 18px;
		color: #76f266;
	}
	.txt1_off {
		font-weight: bold;
		font-size: 18px;
		color: #fa3d3d;
	}
	.txt2 {
		font-size: 10px;
	}
	.txt3 {
		font-weight: bold;
		font-size: 24px;
	}
	.mb24 {
		margin-bottom: 24px;
	}
	.mb8 {
		margin-bottom: 8px;
	}
	.status_on {
		background: #76f266;
	}
	.status_off {
		background: #fa3d3d;
	}
}
::v-deep .el-carousel__container {
	width: 100%;
	height: 100%;
}
::v-deep .el-carousel__indicators {
	display: none;
}
:deep(.el-carousel__arrow--left) {
	left: 31px;
	background-color: #fff !important;

	i {
		color: #4981e6;
		font-size: 18px;
	}
}
:deep(.el-carousel__arrow--right) {
	background-color: #fff !important;
	right: 31px;
	i {
		color: #4981e6;
		font-size: 18px;
	}
}
</style>
